<template>
  <div>
    <h1>插槽</h1>
    <my-slot></my-slot>
    <my-slot> {{str}}</my-slot>
    <my-slot> <span>可以是标签,或者是文字</span> </my-slot>
    <my-slot>
      <template>
        <span>可以是标签,或者是文字</span>
        <span>可以是标签,或者是文字</span>
      </template>
    </my-slot>
    <my-slot2>
      <span slot='head'>我想放到头部</span>
      <div slot='footer'>我想放到下边</div>
      <div slot='footer'>我也想放到下边</div>
      <!-- 可以增加多个的标签 -->
      <template slot='main'>
        <p>我是p标签</p>
        <p>我是p标签</p>
        <p>我是p标签</p>
        <p>我是p标签</p>
        <p>我是p标签</p>
        <p>我是p标签</p>
        <p>我是p标签</p>
      </template>
    </my-slot2>
    <my-slot3 :data="tableData">
      <template slot-scope='scope'>
        <a href=""> {{scope.row1.name }} </a> ----{{ scope.row1.id }}
      </template>
    </my-slot3>
  </div>
</template>

<script>
import MySlot from '../components/my-slot.vue'
import MySlot2 from '../components/my-slot2.vue'
import MySlot3 from '../components/my-slot3.vue'
export default {
  name: 'chp-08',
  components: {
    'my-slot': MySlot,
    'my-slot2': MySlot2,
    'my-slot3': MySlot3
  },
  data () {
    return {
      str: '父类的值',
      tableData: [
        {
          id: '2016-05-02',
          name: '王小虎',
          address: '1518 弄'
        },
        {
          id: '2016-05-04',
          name: '王小虎',
          address: ' 1517 弄'
        },
        {
          id: '2016-05-01',
          name: '王小虎',
          address: ' 1519 弄'
        },
        {
          id: '2016-05-03',
          name: '王小虎',
          address: '1516 弄'
        }
      ]
    }
  }
}
</script>

<style lang="css" scoped>
</style>
